<template>
  <div>
    <div>
      <m-iconfont
        classify="m-pc-public"
        icon="m-pc-public_jiesxx"
        color="#4d84ff"
      ></m-iconfont
      ><span>送票信息</span>
    </div>
    <el-button @click="confirmReceipt">确认签收</el-button>
    <el-form
      ref="baseInfoForm"
      :model="baseInfoForm"
      :inline="true"
      label-width="100px"
      class="demo-ruleForm"
    >
      <div class="topSty">
        <el-form-item label="申请单号" prop="giveApplyCode">
          <span>{{ baseInfoForm.giveApplyCode }}</span>
        </el-form-item>
        <el-form-item label="接收客户" prop="">
          <el-input v-model="baseInfoForm.customerName" disabled> </el-input>
        </el-form-item>
        <el-form-item label="接收科室" prop="">
          <el-input v-model="baseInfoForm.deparName" disabled> </el-input>
        </el-form-item>
        <el-form-item label="接收地址" prop="receiveAddress">
          <el-input v-model="baseInfoForm.receiveAddress" disabled> </el-input>
        </el-form-item>
        <el-form-item label="接收人:" prop="receivePersion">
          <el-input v-model="baseInfoForm.receivePersion" disabled></el-input>
        </el-form-item>
        <el-form-item label="联系电话:" prop="contactPhone">
          <el-input v-model="baseInfoForm.contactPhone" disabled></el-input>
        </el-form-item>
        <el-form-item label="计划送票日期" prop="giveBilingDate">
          <el-input v-model="baseInfoForm.giveBilingDate" disabled></el-input>
        </el-form-item>
      </div>
    </el-form>
    <!--发票明细  -->
    <div>
      <m-iconfont
        classify="m-pc-public"
        icon="m-pc-public_jiesxx"
        color="#4d84ff"
      ></m-iconfont>
      <span>发票明细</span>
    </div>
    <m-editable
      v-loading="tableLoading"
      :empty-type="resultType"
      style="margin: 0 20px"
      :data="dataList"
      height="800"
      :columns="columnsTableA"
    >
      <template slot="default-action" slot-scope="scope">
        <el-button
          type="primary"
          plain
          size="mini"
          @click.stop="toDelete(scope.row)"
          >删除</el-button
        >
      </template>
    </m-editable>
    <el-pagination
      v-show="paging"
      class="pageBox"
      align="right"
      style="margin-top: 10px"
      :current-page="page.curPage"
      :page-sizes="PAGE_NUMBER"
      :page-size="page.size"
      :layout="PAGINATION_LAYOUT"
      :total="page.total"
      @size-change="sizeChange"
      @current-change="pageChange"
    />
    <div>
      <m-iconfont
        classify="m-pc-public"
        icon="m-pc-public_jiesxx"
        color="#4d84ff"
      ></m-iconfont>
      <span>签收信息</span>
    </div>
    <div>
      <div class="remarks-box">
        <div>
          <p style="width: 110px">签收回执单：</p>
          <div class="files-box">
            <div
              v-loading="receivingInfo.files.uploadLoading"
              class="upload-box"
              @click="onProhibitUpload"
            >
              <el-upload
                ref="asd"
                action="string"
                :disabled="receivingInfo.files.imgList.length === 9"
                :show-file-list="false"
                :accept="receivingInfo.files.imageLimit"
                :http-request="onRequest"
                fit="scale-down"
                :multiple="true"
              >
                <div class="popup__m-dialog-upload">
                  <m-iconfont
                    classify="m-pc-public"
                    icon="m-pc-public_tustjimg"
                    size="14"
                  />
                  <p>添加</p>
                  <p>(请上传每张大小不超过5Mb的png、jpg文件,最多9张)</p>
                </div>
              </el-upload>
            </div>
            <div
              v-for="(item, index) in receivingInfo.files.imgList"
              :key="index"
              class="img-box"
            >
              <div
                v-if="item.fileUrl.includes('.pdf')"
                @click.prevent="toPreview(item.fileUrl)"
              >
                <el-image class="img-pdf" :src="PDFPNG"></el-image>
              </div>
              <el-image v-else v-viewer fit="cover" :src="item.fileUrl" />
              <el-upload
                action="string"
                :show-file-list="false"
                :accept="receivingInfo.files.imageLimit"
                :http-request="($event) => onRequest($event, index)"
                fit="scale-down"
                :multiple="true"
              >
                <p>重新上传</p>
              </el-upload>
              <i @click="onDeleteFiles(index)"
                ><m-iconfont
                  classify="m-pc-public"
                  icon="m-pc-public_tishierror"
                  color="#ff0000"
                  size="18"
              /></i>
            </div>
          </div>
          <!-- <m-cards-upload
          :list="receivingInfo.files.list"
          :axios-config="receivingInfo.files.axiosConfig"
          :width="receivingInfo.files.width"
          :height="receivingInfo.files.height"
        >
        </m-cards-upload> -->
        </div>
      </div>
    </div>
  </div>
</template>
<script>
/* eslint-disable */

import { toQuerySPList, toQuerySPDetailsList } from '@api/hossyn-order-center';
import { PAGE_NUMBER, PAGINATION_LAYOUT } from '@const/common';
import PDFPNG from '@pc/assets/telmao/pdf.png';
import { ossUpload } from '@pc/const/api_fileLibrary';
import { columnsTableA } from './const';

export default {
  data() {
    return {
      PDFPNG,
      page: {
        curPage: 1,
        pageSize: PAGE_NUMBER[0],
        total: 0,
      },
      resultType: 0,
      paging: true, // 分页显隐
      PAGE_NUMBER, // 页码数组
      PAGINATION_LAYOUT, // 页码功能布局
      tableLoading: false,
      dataList: [],
      columnsTableA,
      baseInfoForm: {
        customerName: '',
        deparName: '',
        giveApplyCode: '',
        createDate: '',
        contactPhone: '',
        giveBilingDate: '',
      },
      rulesDataListBaseInfo: [],
      receivingInfo: {
        isShow: false,
        files: {
          imageLimit: '.png, .jpg, .jpeg, .pdf',
          uploadLoading: false,
          imgList: [],
        },
      },
    };
  },

  mounted() {
    this.toQuerySPMethod();
    this.toQuerySPDetailsListMethod();
  },

  methods: {
    // 处理数据
    processingData() {
      if (this.$route.query.status === 1) {
      }
    },

    // 确认签收
    confirmReceipt() {},
    // 图片
    onRequest(data, index = '') {
      const { file } = data;
      const FILE_SIZE = file.size / 1024 / 1024 < 5;
      const FILE_FORMAT = this.receivingInfo.files.imageLimit
        .split(', ')
        .filter((item) => file.name.includes(item));
      if (!FILE_FORMAT.length) {
        this.$message.error('文件格式不正确！');
        return;
      }
      if (!FILE_SIZE) {
        this.$message.error('文件大小不得大于5M！');
        return;
      }
      // 发起请求
      const fd = new FormData();
      fd.append('file', file);
      this.receivingInfo.files.uploadLoading = true;
      this.$axios({
        method: 'post',
        url: ossUpload,
        headers: { 'Content-Type': 'multipart/form-data' },
        data: fd,
      })
        .then((res) => {
          const obj = {
            fileUrl: res.data.payload.fileUrl,
            fileName: res.data.payload.fileName,
          };
          if (index !== '') {
            this.receivingInfo.files.imgList.splice(index, 1, obj);
          } else {
            this.receivingInfo.files.imgList.push(obj);
          }
        })
        .finally(() => {
          this.receivingInfo.files.uploadLoading = false;
        });
    },
    onProhibitUpload() {
      if (this.receivingInfo.files.imgList.length >= 9) {
        this.$message.warning('最多可上传9个附件!');
      }
    },
    toPreview(item) {
      this.$pdfViewer({ url: item, title: '预览' });
    },
    // 送票详情giveApplyCode
    toQuerySPMethod() {
      this.$axios({
        url: toQuerySPList,
        method: 'post',
        data: {
          giveApplyId: this.$route.query.giveApplyId,
        },
      })
        .then((res) => {
          this.baseInfoForm = res.data.payload || [];
        })
        .catch((err) => {});
    },
    //  明细列表
    toQuerySPDetailsListMethod() {
      this.tableLoading = true;
      this.$axios({
        url: toQuerySPDetailsList,
        method: 'post',
        data: {
          giveApplyId: this.$route.query.giveApplyId,
          page: this.page.curPage,
          pageSize: this.page.pageSize,
        },
      })
        .then((res) => {
          this.dataList = res.data.payload.content || [];
          this.page.total = res.data.payload.totalElements;
          if (this.page.total == 0) {
            this.paging = false;
          }
          this.tableLoading = false;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 切换不一样的页面,重置一切数据
    pageChange(curPage) {
      this.page.curPage = curPage;
      this.toQuerySPDetailsListMethod();
    },
    // 页码更改
    sizeChange(size) {
      this.page.pageSize = size;
      this.toQuerySPDetailsListMethod();
    },
  },
};
</script>

<style scoped lang="less">
.remarks-box {
  margin-top: 20px;
  padding-bottom: 20px;

  div {
    display: flex;
    p {
      width: 100px;
      text-align: right;
    }
    .files-box {
      display: flex;
      flex-wrap: wrap;
      width: 100%;
      .upload-box {
        width: 193px;
        height: 133px;
        border: 1px solid #e6e6e6;
        margin-right: 20px;
        margin-bottom: 20px;
        .popup__m-dialog-upload {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          width: 180px;
          i {
            color: #85aafd;
            border: 1px solid #85aafd;
            width: 42px;
            height: 42px;
            line-height: 42px;
            font-size: 40px;
            font-weight: bold;
            border-radius: 50%;
            margin-bottom: 10px;
          }
          p {
            font-size: 12px;
            width: 164px;
            text-align: center;
            color: #999999;
          }
          p:last-child {
            margin-top: 5px;
            line-height: 16px;
          }
        }
        .circular {
          margin: 0 auto;
        }
      }
      .img-box {
        width: 193px;
        height: 133px;
        border: 1px solid #e6e6e6;
        margin-right: 20px;
        margin-bottom: 20px;
        position: relative;
        border-radius: 5px;
        cursor: pointer;
        display: flex;
        justify-content: center;
        img {
          max-width: 100%;
          max-height: 100%;
          margin: 0 auto;
        }
        .img-pdf {
          margin: 10px 0;
        }
        p {
          width: 100%;
          opacity: 0.5;
          background: #000000;
          color: #ffffff;
          position: absolute;
          bottom: 0;
          left: 0;
          line-height: 30px;
          text-align: center;
          border-radius: 0 0 5px 5px;
          display: none;
        }

        i {
          position: absolute;
          top: 0;
          right: 0;
        }
      }
    }
    .img-box:hover {
      p {
        display: block;
      }
    }
  }
  .remarks-info {
    display: flex;
  }
}
</style>
